<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <VGroup>
          <el-select style="max-width: 100px" v-model="form.personRange.type" placeholder="请选择">
            <el-option v-for="item in personOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
          <select-personnel class="w-50" v-model="form.personRange.value"></select-personnel>
        </VGroup>
        <el-select class="selectClass" v-model="form.adjust_out_status" placeholder="状态" multiple collapse-tags clearable>
          <el-option v-for="item in options['waremanage.adjustOutOrder']?.[0].adjustOutOrderStatus" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
        <SelectWarehouse class="selectClass" v-model="form.out_warehouse_id" placeholder="发货仓库" :multiple="true">
        </SelectWarehouse>
        <SelectWarehouse class="selectClass" v-model="form.in_warehouse_id" placeholder="目的仓库" :multiple="true">
        </SelectWarehouse>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 120px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()" style="max-width: 300px" />
        </VGroup>
        <multiInput v-model="form.adjust_out_order_no" placeholder="调拨单" class="w-50"></multiInput>
        <multiInput v-model="form.sku" placeholder="SKU" class="w-50"></multiInput>
      </template>
      <template #toolbar_btns>
        <el-button type="primary" @click="open('add')"><svg-icon class="text-white mr-1" icon-class="add"/>新增</el-button>
        <el-button @click="handleOut">出库</el-button>
        <el-button @click="handleAudit">审核</el-button>
        <el-button @click="handleCancel">取消</el-button>
        <el-button class="ml-auto" @click="handleExport"><svg-icon icon-class="import" />导出</el-button>
      </template>
    </VTable>
    <ComModal ref="ComModalRef" :wareDataList="wareDataList" @query="query"></ComModal>
    <derived-center ref="DerivedCenterRef"></derived-center>

  </VPage>
</template>
<script setup name="InventoryAdjust-out-order" lang="jsx">
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, toRefs } from 'vue'
import { getEnums } from '@/api/public'
import { queryAdjustOutList, verifyAdjustOut, cancelAdjustOut } from './api'
import ComModal from './components/ComModal.vue'
import SelectWarehouse from '@/components/SelectWarehouse'
import multiInput from '@/components/multiInput'
import { getLodop } from '@/utils/LodopFuncs.js';

const timeOption = [
  { label: "创建时间", value: "create_time" },
  { label: "领取时间", value: "op_time" },
  { label: "拣货完成时间", value: "pick_complete_time" },
  { label: "出库时间", value: "out_warehouse_time" },
  { label: "取消时间", value: "cancel_time" },
]

const personOptions = [
  { label: "领取人", value: "op_user_id" },
  { label: "取消人", value: "cancel_user_id" },
  { label: "创建人", value: "create_user_id" },
  { label: "出库人", value: "out_warehouse_user_id" },
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 60 },
  formConfig: {
    data: {
      shop_id: '',
      create_time: '',
      status: '',
      operations_personnel: '',
      personRange: { type: 'op_user_id', value: [], range: true },
      timeRange: { type: 'create_time', value: [], range: true },
    }
  },
  columns: [
    { type: 'checkbox', width: "40" },
    {
      type: "seq", title: '序号', width: 80
    },
    {
      field: 'adjust_out_order_no', title: '调拨单', width: 180, slots: {
        default: ({ row }) => {
          return <div class="base-text-color cursor-pointer" onClick={() => open('view',row.id)}> {row.adjust_out_order_no} </div>
        }
      }
    },
    {
      field: 'out_warehouse_name', title: '调出仓', width: 120
    },
    {
      field: 'in_warehouse_name', title: '调入仓', width: 120
    },
    {
      field: 'adjust_out_status_cn', title: '状态', width: 120
    },
    {
      field: 'turnover_box_id', title: '周转箱', width: 100
    },
    {
      field: 'sku_count', title: 'SKU数量', width: 100
    },
    {
      field: 'sku_num', title: 'SKU件数', width: 100
    },
    {
      field: 'create_user', title: '创建人', width: 160
    },
    {
      field: 'create_time', title: '创建日期', width: 180
    },
    {
      field: 'cancel_user', title: '取消人', width: 160
    },
    {
      field: 'op_user', title: '领取人', width: 120
    },
    {
      field: 'op_time', title: '领取时间', width: 180
    },
    {
      field: 'pick_complete_time', title: '拣货完成时间', width: 120
    },
    {
      field: 'out_warehouse_time', title: '出库时间', width: 180
    },
    {
      field: 'cancel_time', title: '取消时间', width: 180
    },
    {
      title: '操作', width: "160", fixed: "right", slots: {
        default: ({ row }) => {
          return <div class="table-option">
            <div>
              {row.adjust_out_status == 1 && <el-link type="primary" underline={false} class="mr-2" onClick={() => open('edit', row.id)}>修改</el-link>}
              {(row.adjust_out_status == 1 || row.adjust_out_status == 2) && <el-link type="primary" underline={false} class="mr-2" onClick={() => handleCancel(row.id)}>取消</el-link>}
              <el-link type="primary" underline={false} class="mr-2" onClick={() => handlePrint(row)}>打印</el-link>
            </div>
          </div >
        }
      }
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await queryAdjustOutList({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})
const query = () => {
  tableRef.value.query()
}

const data = reactive({
  options: [],
})
const { options } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "waremanage.adjustOutOrder"
    ]
  }).then(res => {
    options.value = res.data
  })
}
provide('options', options)
fetchOption()

const ComModalRef = ref()
const open = (type, id) => {
  ComModalRef.value.open(type, id)
}

const handleOut = () => {
  const records = getSelectRow().map(i => {
    return i.id
  })
  if (records.length > 1) {
    ElMessage.error('只能选择一行')
    return
  }
  if (records.length == 0) {
    ElMessage.error('至少选择一行')
    return
  }
  open('out', records[0])
}

// 审核
const handleAudit = () => {
  const records = getSelectRow().map(i => {
    return i.id
  })
  if (records.length == 0) {
    ElMessage.error('请先选择行')
    return
  }
  ElMessageBox.confirm('是否审核当前勾选项?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    verifyAdjustOut({ ids: records })
      .then((res) => {
        query()
        ElMessage.success(res.message)
      })
  })
}

// 取消
const handleCancel = (id) => {
  const records = getSelectRow().map(i => {
    return i.id
  })
  if (!id) {
    if (records.length == 0) {
      ElMessage.error('请先选择行')
      return
    }
  }
  const ids = id ? [id] : records
  ElMessageBox.confirm('是否取消当前勾选项?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    cancelAdjustOut({ ids })
      .then((res) => {
        query()
        ElMessage.success(res.message)
      })
  })
}

// 导出
const DerivedCenterRef = ref()
const handleExport = (val) => {
  let condition = tableRef.value.getQueryForm()
  DerivedCenterRef.value.open({
    id: 43,
    tag_name: 'wms',
    condition
  })
}
//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords()
}

const handlePrint = () => {
  const LODOP = getLodop();
  LODOP.SET_PRINT_PAGESIZE(1, '600mm', 0, "")
  LODOP.ADD_PRINT_TEXT(25, 32, 135, 29, "打印人:TimyLuo");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  LODOP.ADD_PRINT_TEXT(25, 177, 195, 32, "打印时间：2023/09/21 17:35:41");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.ADD_PRINT_TEXT(63, 32, 339, 25, "调拨单号: DB1234485855");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.ADD_PRINT_BARCODE(25, 393, 263, 67, "Code39", "123456789012");
  const table = `<style> table{width：400px} table,td,th {border: 1px solid black;border-style: solid;border-collapse: collapse}</style><table border = "1" width = 630 ><tr><td>SKU</td><td>数量</td><td>货位</td><td>图片</td><td>产品名称</td></tr>
  <tr>
    <td>
  <div>自定义SKU</div>
  <div>SKU</div>
  </td>
    <td>2</td>
    <td>SD-2323</td>
    <td></td>
    <td>
    <div>产品名称</div>
    <div>产品属性</div>
    <div>颜色尺寸</div>
    <div>箱PCS数</div>
    <div>装箱规格</div>
  </td>
  </tr>
  </table>`
  LODOP.ADD_PRINT_TABLE(182, 25, 732, 155, table);
  LODOP.ADD_PRINT_RECT(137, 27, 630, 45, 0, 1);
  LODOP.ADD_PRINT_TEXT(144, 40, 612, 35, "建单人，国家简码，目的地地址");
  LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
  LODOP.PREVIEW(); // 打印预览

}



</script>